import { defineComponent, ref } from 'vue'
import '../assets/style/block-resize.scss'

export default defineComponent({
  props: {
    block: Object,
    registerConfig: Object,
  },
  setup(props, ctx) {
    const { width, height } = props.registerConfig.resize

    const currentData = ref({})

    const mousemove = (e) => {
      let { clientX, clientY } = e

      const { startX, startY, startWidth, startHeight, startTop, startLeft, direction } = currentData.value

      if (direction.horizontal == 'center') {
        clientX = startX
      }

      if (direction.vertical == 'center') {
        clientY = startY
      }

      // 鼠标移动的距离
      let moveX = clientX - startX
      let moveY = clientY - startY

      if (direction.vertical == 'start') {
        moveY = -moveY
        props.block.top = startTop - moveY
      }
      if (direction.horizontal == 'start') {
        moveX = -moveX
        props.block.left = startLeft - moveX
      }

      const width = startWidth + moveX
      const height = startHeight + moveY

      props.block.width = width
      props.block.height = height
    }

    const mouseup = (e) => {
      document.removeEventListener('mousemove', mousemove)
      document.removeEventListener('mouseup', mouseup)
    }

    const onmousedown = (e, direction) => {
      e.stopPropagation()
      const { clientX, clientY } = e

      currentData.value = {
        startX: clientX,
        startY: clientY,
        startWidth: props.block.width,
        startHeight: props.block.height,
        startTop: props.block.top,
        startLeft: props.block.left,
        direction,
      }

      document.addEventListener('mousemove', mousemove)

      document.addEventListener('mouseup', mouseup)
    }

    return () => (
      <>
        {width && (
          <>
            <div
              class="resize-block resize-block-left"
              onMousedown={(e) => onmousedown(e, { horizontal: 'start', vertical: 'center' })}></div>
            <div
              class="resize-block resize-block-right"
              onMousedown={(e) => onmousedown(e, { horizontal: 'end', vertical: 'center' })}></div>
          </>
        )}
        {height && (
          <>
            <div
              class="resize-block resize-block-top"
              onMousedown={(e) => onmousedown(e, { horizontal: 'center', vertical: 'start' })}></div>
            <div
              class="resize-block resize-block-bottom"
              onMousedown={(e) => onmousedown(e, { horizontal: 'center', vertical: 'end' })}></div>
          </>
        )}
        {width && height && (
          <>
            <div
              class="resize-block resize-block-left-top"
              onMousedown={(e) => onmousedown(e, { horizontal: 'start', vertical: 'start' })}></div>
            <div
              class="resize-block resize-block-right-top"
              onMousedown={(e) => onmousedown(e, { horizontal: 'end', vertical: 'start' })}></div>
            <div
              class="resize-block resize-block-left-bottom"
              onMousedown={(e) => onmousedown(e, { horizontal: 'start', vertical: 'end' })}></div>
            <div
              class="resize-block resize-block-right-bottom"
              onMousedown={(e) => onmousedown(e, { horizontal: 'end', vertical: 'end' })}></div>
          </>
        )}
      </>
    )
  },
})
